<template>
  <div class="flow">
    <div class="formLook">
      <div class="view-container">
        <TitleComponent title="应聘申请表查看"  />
        <div class="view-container-center">
          <!-- 附件简历 -->
          <div class="attachment-section">
            <div class="avatar-container">
              <ImageComponent
                :src="applicationForm.personPhoto"
                width="100px"
                height="100px"
                borderRadius="6px"
              />
            </div>
            <div class="attachment-info">
              <div class="attachment-label">附件简历：</div>
              <div class="attachment-file">
                <div class="file-attachment" v-if="applicationForm.resumeFile">
                  <div class="file-item">
                    <el-icon><Document /></el-icon>
                    <span
                      class="file-name"
                      @click="seeFileView(applicationForm.resumeFile)"
                      >{{ getFileName(applicationForm.resumeFile) }}</span
                    >
                  </div>
                </div>
                <span v-else style="font-size: 12px">暂无附件</span>
              </div>
            </div>
          </div>

          <!-- 基本信息 -->
          <div class="section">
            <div class="section-title">
              <span>基本信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <InfoItem label="姓名：" :value="applicationForm.name" />
              </el-col>
              <el-col :span="12">
                <InfoItem label="性别" :value="applicationForm.sex" />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <InfoItem
                  label="联系电话："
                  :value="applicationForm.phoneNumber"
                />
              </el-col>
              <el-col :span="12">
                <InfoItem label="邮箱：" :value="applicationForm.mail" />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <InfoItem
                  label="身份证号："
                  :value="applicationForm.idNumber"
                />
              </el-col>
              <el-col :span="12">
                <InfoItem
                  label="出生日期："
                  :value="applicationForm.birthTime"
                />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <InfoItem label="年龄：" :value="applicationForm.age" />
              </el-col>
              <el-col :span="12">
                <InfoItem
                  label="毕业院校："
                  :value="applicationForm.graduateSchool"
                />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <InfoItem
                  label="专业名称："
                  :value="applicationForm.profession"
                />
              </el-col>
            </el-row>
          </div>

          <!-- 工作经历 -->
          <div class="section">
            <div class="section-title">
              <span>工作经历</span>
            </div>
            <div
              class="work-experience"
              v-for="(experience, index) in applicationForm.workExperience"
              :key="index"
            >
              <!-- 左侧圆点和垂直线条 -->
              <div class="timeline-dot"></div>
              <div class="timeline-line"></div>
              <div class="experience-content">
                <div class="experience-time">
                  <span
                    >{{ experience.startTime }} - {{ experience.endTime }}</span
                  >
                </div>
                <div class="experience-company">
                  <span>{{ experience.companyName }}</span>
                </div>
                <div class="experience-position">
                  <span>{{ experience.positionHeld }}</span>
                </div>

                <!-- 主要工作内容左右布局 -->
                <el-row :gutter="20">
                  <el-col :span="4">
                    <div class="label">主要工作内容:</div>
                  </el-col>
                  <el-col :span="20">
                    <div class="experience-content-text">
                      <div
                        v-for="(item, idx) in experience.mainWorkContent"
                        :key="idx"
                      >
                        <span>{{ item }}</span>
                      </div>
                    </div>
                  </el-col>
                </el-row>

                <div class="experience-notes">
                  <div v-for="(note, idx) in experience.notes" :key="idx">
                    <span>{{ note }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 应聘信息 -->
          <div class="section">
            <div class="section-title">
              <span>应聘1111信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <InfoItem
                  label="应聘岗位："
                  :value="applicationForm.applicationPositonName"
                />
              </el-col>
              <el-col :span="12">
                <InfoItem
                  label="应聘渠道："
                  :value="applicationForm.applicationSource"
                />
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ImageComponent from "@/components/ImageComponent.vue";
import { Document } from "@element-plus/icons-vue";
import { jobApplicationInfo } from "@/api/recruitment/jobApplication/index.js";
import { seeFileView, getFileName } from "@/utils/fileView.js";
import { useRoute, useRouter } from "vue-router";
import TitleComponent from "@/components/TitleComponent.vue";
import InfoItem from "@/components/InfoItem/index.vue";

const route = useRoute();

const { proxy } = getCurrentInstance();
const applicationForm = reactive({
  name: "",
  sex: "0",
  phoneNumber: "",
  mail: "",
  // 身份证号
  idNumber: "",
  // 出生日期
  birthTime: "",
  age: "",
  // 专业
  profession: "",
  // 学历
  educationalBackground: "",
  // 毕业院校
  graduateSchool: "",
  // 备注
  remarks: "",
  // 简历附件
  resumeFile: "",
  // 个人照片
  personPhoto: "",
  // 工作经历
  workExperience: [],
  // 应聘岗位
  applicationPositonName: "",
  // 应聘岗位id
  applicationPositonId: "",
  // 应聘渠道
  applicationSource: "",
  // 需求部门id
  requireDeptId: "",
  // 需求部门
  requireDeptName: "",
  // 岗位编号
  jobCode: "",
  // 期望到岗日期
  hopeArrivalTime: "",
});

onMounted(() => {
  if (route.query.id) {
    getJobInfo(route.query.id);
  }
});
const getJobInfo = (id) => {
  jobApplicationInfo(Number(id)).then((res) => {
    if (res.data) {
      Object.keys(res.data).forEach((item) => {
        if (res.data[item]) {
          applicationForm[item] = res.data[item];
          applicationForm.workExperience = res.data.workExperience;

          // res.data.workExperience.forEach((workItem) => {
          //   workItem.mainWorkContent = workItem.mainWorkContent.split("\n");
          // });
          res.data.workExperience.forEach((workItem) => {
            if (
              workItem.mainWorkContent !== null &&
              typeof workItem.mainWorkContent === "string"
            ) {
              workItem.mainWorkContent = workItem.mainWorkContent.split("\n");
            }
          });
        }
      });
    }
  });
};
const resetForm = () => {
  const obj = { path: "/recruitment/jobApplication" };
  proxy.$tab.closeOpenPage(obj);
};
</script>

<style scoped>
.view-container {
  width: 100%;
  margin: 0px auto;
  background: #fff;
  height: 100%;
  overflow: auto;
}

.view-container-center {
  max-width: 800px;
  margin: 0 auto;
  margin-top: 20px;
}

.attachment-section {
  display: flex;
  margin-bottom: 20px;
}

.avatar-container {
  margin-right: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  /* border-radius: 50%; */
  object-fit: cover;
}

.attachment-info {
  flex: 1;
  font-size: 14px;
}

.attachment-label {
  font-weight: bold;
  color: #16191d;
  margin-bottom: 10px;
  font-size: 14px;
}

.attachment-file {
  display: flex;
  align-items: center;
}

.section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
  color: #16191d;
}

.form-item {
  display: flex;
  margin-bottom: 15px;
}

.label {
  min-width: 40px;
  /* font-weight: bold; */
  font-size: 14px;
  color: #6f7b90;
}

.value {
  flex: 1;
  color: #16191d;
  font-size: 13px;
}

.experience-time {
  color: #999;
  font-size: 14px;
  margin-bottom: 10px;
}

.experience-company {
  margin-bottom: 5px;
  color: #007bff;
  font-size: 14px;
}
.timeline-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #409eff;
}

.work-experiences {
  position: relative;
  padding-left: 30px;
}

.work-experience {
  position: relative;
  margin-bottom: 30px;
}
.timeline-line {
  position: absolute;
  left: 8px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background-color: #e8e8e8;
}

.experience-position {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
}

.experience-notes {
  color: #16191d;
  font-size: 14px;
}

.main-work-label {
  font-weight: bold;
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

.experience-content {
  margin-bottom: 10px;

  position: relative;
  margin-left: 20px;
}

.experience-content div {
  margin-bottom: 5px;
  color: #16191d;
  font-size: 13px;
}

.file-attachment {
  width: 100%;
  max-width: 200px;
  font-size: 12px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.file-item .el-icon {
  margin-right: 10px;
  color: #409eff;
}

.file-name {
  max-width: 180px; /* 设置最大宽度 */
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */

  color: #409eff;
  text-decoration: none;
  cursor: pointer;
}

.file-name:hover {
  text-decoration: underline;
}
</style>
